@import "../../Variables";

.main-page {
  .splash {
    background-color: #0c82f855;
    padding: 2rem 2.5rem;
    border-radius: 1.5rem;
    margin: 1rem 0 2.5rem 0;
    color: white;
    box-shadow: 3px 3px 12px rgba(Gray, 0.5);
    backdrop-filter: blur(1px);

    > .intro {
      line-height: 1.5;
    }

    .logo {
      width: 96px;
    }
  }
  article {
    margin: 0 0 1rem 0;
    max-width: 1280px;

    .advantage {
      margin: 1.5rem 0 2.5rem 0;

      > .row {
        > div {
          display: flex;
          align-items: stretch;

          .intro {
            padding: 1rem;
            border-radius: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 3px 3px 12px rgba(Gray, 0.5);

            > h4 {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              color: $primary-color;
            }

            backdrop-filter: blur(5px);

            &.easy-to-use {
              background-color: #8aff7177;
            }

            &.fully-documentation {
              background-color: #bb6ffb77;
            }

            &.new-technology {
              background-color: #fff87177;
            }
          }
        }
      }
    }

    .features {
      margin: 1.5rem 0 2.5rem 0;
      > .row {
        > div {
          display: flex;
          flex-direction: column;

          .card {
            flex: 1;
            background-color: #ffffff66;
            box-shadow: 3px 3px 12px rgba(Gray, 0.5);
            backdrop-filter: blur(10px);
            h5 {
              color: $primary-color;
            }

            .card-body {
              .media {
                display: flex;
                flex-direction: row;
                svg {
                  width: 36px;
                }
                .media-body {
                  flex: 1;
                  margin-left: 0.5rem;
                }
              }
            }
          }
        }
      }
    }

    .support {
      margin: 1.5rem 0 2.5rem 0;

      img {
        max-width: 100%;
      }
    }
  }
}
